<template>
  <div>
    <el-dialog
      title="重复发票箱单"
      :visible.sync="centerDialogVisible"
      width="80%"
    >
      <h1>发票</h1>
      <el-table
        :data="invoices"
        ref="invoicesTable"
        tooltip-effect="dark"
        border
        style="width: 100%"
        height="300"
        @selection-change="handleInvoicesSelectionChange"
      >
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column fixed prop="id" label="序号"> </el-table-column>
        <el-table-column prop="shipmentId" label="shipmentId">
        </el-table-column>
        <el-table-column prop="referenceId" label="referenceId">
        </el-table-column>
        <el-table-column prop="sku" label="SKU"> </el-table-column>
        <el-table-column prop="num" label="SKU个数"> </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="deleInvoice(scope.$index, scope.row)"
              type="text"
              size="small"
              >删除发票</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="batchDeleInvoice()">批量刪除选择发票</el-button>
      </div>
      <h1 style="margin-top: 20px">箱单</h1>
      <el-table
        :data="packs"
        ref="packTable"
        tooltip-effect="dark"
        @selection-change="handlePackSelectionChange"
        border
        height="300"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column fixed prop="id" label="序号"> </el-table-column>
        <el-table-column prop="startNumNo" label="箱号"> </el-table-column>
        <el-table-column fixed="right" label="SKU信息">
          <template slot-scope="scope">
            <el-row
              class="row-item"
              v-for="(item, k) in scope.row.packSkuList"
              :key="k"
            >
              <el-col :span="24">
                SKU: {{ item.sku }} 数量: {{ item.num }}</el-col
              >
            </el-row>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="deletePack(scope.$index, scope.row)"
              type="text"
              size="small"
              >删除箱单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="batchDeletePack()">批量刪除选择箱单</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

import { m } from "@/store/yg/common/local";

export default {
  props: {
    packs: {
      type: Array,
      default: []
    },
    invoices: {
      type: Array,
      default: []
    },
    Constatvariable: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  methods: {
    handleInvoicesSelectionChange(val) {
      this.invoicesSelection = val;
      console.log(this.invoicesSelection);
    },
    handlePackSelectionChange(val) {
      this.packSelection = val;
      console.log(this.packSelection);
    },

    batchDeleInvoice() {
      if (!this.invoicesSelection || this.invoicesSelection.length < 1) {
        this.$message.error("请先选择需要删除的发票！");
        return;
      }
      var ids = [];
      this.invoicesSelection.forEach(element => {
        ids.push(element.id);
      });

      var param = {};
      param["ids"] = ids;
      param["code"] = "Invoice";
      ajax("deleteRepeatingInvoicePack", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("系统错误");
          } else {
            this.invoices.splice(index, 1);
            this.$message.success("删除成功!");
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    deleInvoice(index, row) {
      var param = {};
      param["id"] = row.id;
      param["code"] = "Invoice";
      ajax("deleteRepeatingInvoicePack", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("系统错误");
          } else {
            this.invoices.splice(index, 1);
            this.$message.success("删除成功!");
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    batchDeletePack() {
      if (!this.packSelection || this.packSelection.length < 1) {
        this.$message.error("请先选择需要删除的发票！");
        return;
      }
      var ids = [];
      this.packSelection.forEach(element => {
        ids.push(element.id);
      });

      var param = {};
      param["ids"] = ids;
      param["code"] = "Pack";
      ajax("deleteRepeatingInvoicePack", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("系统错误");
          } else {
            this.$message.success("删除成功!");
            this.packs.splice(index, 1);
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    deletePack(index, row) {
      var param = {};
      param["id"] = row.id;
      param["code"] = "Pack";
      ajax("deleteRepeatingInvoicePack", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("系统错误");
          } else {
            this.$message.success("删除成功!");
            this.packs.splice(index, 1);
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      packSelection: [],
      invoicesSelection: []
    };
  }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
